<template>
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="C">
      <div class="saerchbox">
        <router-link to="/product/product/index">
          <input name="" type="text" placeholder="请输入您要搜索的内容" /><img
            src="/assets/images/ss.png"
          />
        </router-link>
      </div>
    </div>
    <div class="R" @click="showPopup = true"><img src="/assets/images/tr.png" /></div>
  </div>
  <div class="clear"></div>
  <!-- 轮播图 -->
  <div class="aui-m-slider">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in recommendlist" :key="item.id">
        <van-image fit="cover" :src="item.thumbs_text" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="clear"></div>
  <!-- 分类 -->
  <div class="lqgwBox">
    <ul>
      <li v-for="item in typelist" :key="item.id">
        <router-link :to="{ path: '/product/product/index', query: { typeid: item.id } }">
          <img :src="item.thumb_text" />
          <p>{{ item.name }}</p>
        </router-link>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <div class="clear"></div>
  <ul class="proul">
    <li v-for="item in newlist" :key="item.id">
      <div class="con">
        <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
          <img :src="item.thumbs_text" />
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="adBox">
    <img src="/assets/images/banner.jpg" />
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>热销<span>•</span>单品</p>
  </div>
  <div class="clear"></div>
  <ul class="proul">
    <li v-for="item in hotlist" :key="item.id">
      <div class="con">
        <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
          <img :src="item.thumbs_text" />
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>
  <div class="clear"></div>

  <div class="h54"></div>
  <Footer />
  <van-popup v-model:show="showPopup" position="right" :style="{ height: '100%' }">
    <van-sidebar v-model="activeType">
      <van-sidebar-item
        v-for="item in typelist"
        :key="item.id"
        :title="item.name"
        @click="ChangeType(item.id)"
      />
    </van-sidebar>
  </van-popup>
</template>

<script setup>
import Footer from "@/components/common/footer.vue";
const router = useRouter();
const typelist = ref([]);
const showPopup = ref(false);
const activeType = ref(0);
const recommendlist = ref([]);
const newlist = ref([]);
let hotlist = reactive([]);
onMounted(() => {
  getIndexData();
});
const getIndexData = async () => {
  let result = await Api.productIndex();
  if (result.code == 1) {
    let data = result.data;
    typelist.value = data.typelist;
    recommendlist.value = data.recommendlist;
    newlist.value = data.newlist;
    hotlist = data.hotlist;
  }
};

const ChangeType = (val) => {
  router.push({
    path: "/product/product/index",
    query: { typeid: val },
  });
};
</script>
